<template>
  <!-- 注册页面容器 -->
  <div class="register-container">
    <h2>欢迎注册QQ</h2>
    <p>每一天，乐在沟通。</p>
    <!-- 注册表单，预防默认提交行为 -->
    <form @submit.prevent="onSubmit">
      <!-- 昵称输入框及其错误提示 -->
      <div class="form-group">
        <input
          type="text"
          id="nickname"
          placeholder="昵称"
          v-model="nickname"
          @blur="validateNickname"
          required
          :class="{
            valid: isValidNickname,
            invalid: !isValidNickname && nickname !== '',
            default: nickname === '',
          }"
        />
        <transition name="fade">
          <p v-if="errors.nickname" class="error">{{ errors.nickname }}</p>
        </transition>
      </div>
      <!-- 密码输入框及其错误提示 -->
      <div class="form-group">
        <input
          type="password"
          id="password"
          placeholder="密码"
          v-model="password"
          @blur="validatePassword"
          required
          :class="{
            valid: isValidPassword,
            invalid: !isValidPassword && password !== '',
            default: password === '',
          }"
        />
        <transition name="fade">
          <p v-if="errors.password" class="error">{{ errors.password }}</p>
        </transition>
      </div>
      <!-- 手机号码输入框及其错误提示 -->
      <div class="form-group">
        <input
          placeholder="手机号码"
          type="tel"
          id="phone"
          v-model="phone"
          @focus="showCodeInput = true"
          @blur="validatePhone"
          required
          :class="{
            valid: isValidPhone,
            invalid: !isValidPhone && phone !== '',
            default: phone === '',
          }"
        />
        <transition name="fade">
          <p v-if="errors.phone" class="error">{{ errors.phone }}</p>
        </transition>
      </div>
      <!-- 短信验证码输入框及其错误提示 -->
      <div class="form-group" v-show="showCodeInput">
        <div class="code-input-container">
          <input
            type="text"
            id="code"
            placeholder="短信验证码"
            v-model="code"
            @blur="validateCode"
            required
            :class="{
              valid: isValidCode,
              invalid: !isValidCode && code !== '',
              default: code === '',
            }"
          />
          <button type="button" class="send-code-btn" :disabled="!isValidPhone" @click="sendCode">
            发送
          </button>
        </div>
        <transition name="fade">
          <p v-if="errors.code" class="error">{{ errors.code }}</p>
        </transition>
      </div>
      <!-- 用户协议复选框 -->
      <div class="checkbox-group">
        <input type="checkbox" id="agree" v-model="checked" />
        <label for="agree">我已阅读并同意服务协议和QQ隐私保护指引</label>
      </div>
      <!-- 注册按钮 -->
      <button type="submit" class="submit-btn">立即注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nickname: '',
      password: '',
      phone: '',
      code: '',
      checked: false,
      showCodeInput: false,
      errors: {
        nickname: '',
        password: '',
        phone: '',
        code: '',
      },
    }
  },
  computed: {
    // 计算昵称验证结果
    isValidNickname() {
      return this.errors.nickname === ''
    },
    // 计算密码验证结果
    isValidPassword() {
      return this.errors.password === ''
    },
    // 计算手机号验证结果
    isValidPhone() {
      const phonePattern = /^1[3-9]\d{9}$/
      return phonePattern.test(this.phone)
    },
    // 计算验证码验证结果
    isValidCode() {
      return this.errors.code === ''
    },
  },
  methods: {
    // 昵称验证逻辑
    validateNickname() {
      if (!this.nickname) {
        this.errors.nickname = '昵称不可以为空'
      } else {
        this.errors.nickname = ''
      }
    },
    // 密码验证逻辑
    validatePassword() {
      if (!this.password) {
        this.errors.password = '密码不能为空'
      } else {
        this.errors.password = ''
      }
    },
    // 手机号验证逻辑
    validatePhone() {
      const phonePattern = /^1[3-9]\d{9}$/
      if (!this.phone) {
        this.errors.phone = '请填写手机号'
      } else if (!phonePattern.test(this.phone)) {
        this.errors.phone = '手机号格式不正确'
      } else {
        this.errors.phone = ''
      }
    },
    // 验证码验证逻辑
    validateCode() {
      if (!this.code) {
        this.errors.code = '请填写短信验证码'
      } else {
        this.errors.code = ''
      }
    },
    // 发送验证码逻辑
    sendCode() {
      // 发送验证码逻辑
      console.log('发送验证码')
    },
    // 提交注册表单逻辑
    onSubmit() {
      this.validateNickname()
      this.validatePassword()
      this.validatePhone()
      this.validateCode()

      if (Object.values(this.errors).some((error) => error)) {
        return
      }

      if (!this.checked) {
        this.$notify({ type: 'warning', message: '请阅读并同意服务协议和QQ隐私保护指引' })
        return
      }

      alert('注册成功！')
      console.log('submit', {
        nickname: this.nickname,
        password: this.password,
        phone: this.phone,
        code: this.code,
      })
      // 这里可以添加注册逻辑
    },
  },
}
</script>

<style scoped>
/* 注册页面样式 */
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

h2 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 20px;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 300px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

/* 根据验证结果改变输入框边框颜色 */
.form-group input.valid {
  border-color: lightgreen;
}

.form-group input.invalid {
  border-color: lightcoral;
}

.form-group input.default {
  border-color: lightgray;
}

/* 发送验证码按钮样式 */
.send-code-btn {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.send-code-btn:disabled {
  background-color: gray;
  cursor: not-allowed;
}

/* 验证码输入容器样式 */
.code-input-container {
  display: flex;
  align-items: center;
}

.code-input-container input {
  width: 80%;
}

/* 用户协议复选框样式 */
.checkbox-group {
  margin-bottom: 15px;
}

/* 提交按钮样式 */
.submit-btn {
  width: 100%;
  max-width: 300px;
  padding: 10px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 错误提示样式 */
.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

/* 淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
